var commitTag;
$(function() {
	
	$('textarea.tags').livequery(function() {
		var input = $(this);
		
		// insert the tagfield div after the input and hide the input
		input.after('<div id="tagfield_' + input.attr('id') + '" class="tagfield"><input type="text" autocomplete="off" /><br class="clear" /></div>');
		input.hide();
		
		// grab the tagfield, and set the click even to focus the input
		var tagfield = $('#tagfield_' + input.attr('id'));
		tagfield.click(function() { tagfield.find('input').focus(); });
		
		tagfield.after('<div id="tagfield_autocomplete_' + input.attr('id') + '" class="tag-autocomplete" style="display:none"></div>');
		var autocomplete = $('#tagfield_autocomplete_' + input.attr('id'))
		autocomplete.css('position', 'absolute').parent().css('position', 'relative');
		
		// override any label for the field
		$('label[for=' + input.attr('id') + ']').click(function(e) {
			e.preventDefault();
			tagfield.find('input').focus();
		});
		// this function writes any values back to the input
		var write_to_input = function() {
			tagfield.find('input').val('');
			input.val('');
			tagfield.find('span').each(function() {
				input.val(input.val() + $(this).text().replace(/^ +/, '').replace(/ +$/, '') + "\n");
			});
		};
		
		// initialise the tags with anything from the input
		tags = input.val().split("\n");
		$(tags).each(function() { if (this != '') {
			tagfield.find('input').before('<span><a class="delete"></a>' + this + '</span> ');
		} });
		
		
		commitTag = function(tagfield) {
			tagfield = $('#'+tagfield);
			var new_tag = tagfield.find('input').val().replace(/^ +/, '').replace(/ +$/, '');
			if (tagfield.find('span:regex(^' + RegExp.escape(new_tag) + '$)').length) {
				var default_colour = tagfield.find('span:contains(' + new_tag + ')').css('background-color');
				tagfield.find('span:regex(^' + RegExp.escape(new_tag) + '$)').animate({ backgroundColor: '#ff0' }).animate({ backgroundColor: default_colour });
			} else {
				tagfield.find('input').before('<span><a class="delete"></a>' + tagfield.find('input').val() + '</span> ');
			}
			write_to_input();
			autocomplete.html('').hide();
			
		}
		// whenever a key is pressed within the input
		var bindto = $.browser.mozilla ? 'keyup' : 'keydown';
		tagfield.find('input').bind(bindto + ' blur', function(e) {
			// if it's backspace and there's no content in the input
			if (e.which == 8 && tagfield.find('input').val() == '') {
				tagfield.find('span:last').remove();
				write_to_input();
				autocomplete.html('').hide();
			} 
			// else if it's space or return, and there is content, create a tag
			else if (e.which == 13 || e.type == 'blur') {
				e.preventDefault();
				if (tagfield.find('input').val() != '') {
					setTimeout("commitTag('" + tagfield.attr('id') + "')", 200);
				}
			}
			// else set the timeout to do prediction
			else {
				$.get('/admin/autocomplete-tags/', { tag: tagfield.find('input').val() }, function(responseText) {
					if (responseText) {
						autocomplete.html(responseText).show();
						autocomplete.find('li').click(function() {
							tagfield.find('input').val($(this).text());
						});
					} else {
						autocomplete.html('').hide();
					}
				});
			}
			
			
			
		});
		
		// if the delete link is clicked, remove the tag
		$('.tagfield span a.delete').livequery('click', function() {
			$(this).parent().remove();
			write_to_input();
		});
		
	});
	
	
});